<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    html {
      --light-gray: hsl(210, 17%, 95%);
    }
    .why {
      display: inline-block;
      font-size: 0.8rem;
      border: 1px solid gray;
      padding-left: 0.35rem;
      padding-right: 0.35rem;
      border-radius: 0.5rem;
    }
    .everyMonth {
      font-size: 0.8rem;
    }
    .recordData {
      font-size: 0.8rem;
    }
    .page-footer {
      margin-top: 3em;
      padding: 1em 0;
      background-color: var(--light-gray);
      color: var(--gray);
    }
    .page-footer__inner {
      margin: 0 auto;
      max-width: 1080px;
      text-align: center;
      font-size: 0.8rem;
    }
    .instructions {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-body {
      display: none;
      position: fixed;
      top: 3em;
      bottom: 3em;
      right: 20%;
      left: 20%;
      padding: 2em 3em;
      background-color: white;
      overflow: auto;
      overflow: scroll;
      word-break: break-all;
    }
  </style>
  <body>
    <audio src="ding.m4a" id="myAudio">
      Audio player not available.
    </audio>
    <audio src="feng.m4a" id="fengAudio">
      Audio player not available.
    </audio>
    <audio src="fuck.m4a" id="fuckAudio">
      Audio player not available.
    </audio>

    <div class="instructions">
      <p class="modal-body">
        <img src="x.jpg" alt="404" style="width: 100%;" />
        发现 BUG 请邮件 3633696357@qq.com
      </p>
    </div>

    <h1>利息计算器 <span class="why">?</span></h1>
    <div>
      借款金额：
      <input
        type="number"
        id="money"
        placeholder="请输入金额"
        value="10000"
      />元
    </div>
    <div>
      借款周期：
      <select name="cycle" id="cycle-select"> </select>
      <select name="day" id="day-select" disabled style="opacity: 1;"></select>
    </div>
    <div>
      还款方式：
      <input type="radio" id="huey" name="drone" value="huey" checked />
      <label for="huey">先息后本</label>

      <input type="radio" id="dewey" name="drone" value="dewey" />
      <label for="dewey">每月等额</label>
    </div>
    <div>
      年 利 息 ：
      <input
        type="number"
        id="interest"
        value="12.775"
        placeholder="请输入年利息"
      />%
    </div>
    <div>借款日期： <input type="date" id="borrowDate" /></div>
    <div>还款日期： <input type="date" id="payDate" /></div>
    <br />
    <button class="resest" style="background-color: yellow;">重置💥</button>
    <button
      class="btn"
      style="background-color: red; color: white; border-color: red;"
    >
      点我计算🤞</button
    ><span class="warn" style="color: red;"></span>

    <p>
      <strong>每月应还：</strong>
      <!-- <button
        class="copy"
        style="padding: 0; border: 1px solid green; border-radius: 0.2rem;"
      >
        复制
      </button> -->
      <span class="everyMonth">*</span>
    </p>
    <p><strong>总利息：</strong><span class="allInterest">*</span></p>
    <p>
      <strong>本金 + 总利息：</strong
      ><span class="allMoney" style="color: red;">*</span>
    </p>

    <button class="clean">清空🚽</button>
    <button class="record" style="color: darkorchid;">记录本条数据📝</button>
    <p class="recordData"></p>

    <script src="js.js"></script>
  </body>

  <footer class="page-footer">
    <div class="page-footer__inner">
      Copyright &copy; 2022 LZM, Inc.
    </div>
  </footer>
</html>
